<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #update {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 添加 -->
    <form action="http://www.baidu.com" id="add">
        姓名: <input type="text" id="addUserName" placeholder="请输入姓名"><br>
        性别: <input type="text" id="addGender" placeholder="请输入性别"><br>
        <input type="submit" value="添加">
    </form><br><br>

    <table border="1">
        <thead>
            <tr bgcolor="gray" align="center">
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>文渊</td>
                <td>男</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr> -->
        </tbody>
    </table>
    <br><br>
    <!-- 
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
        大哥,我在修改
    -->
    <form action="##" id="update">
        <input type="hidden" id="editId">
        姓名: <input type="text" id="editUserName" placeholder="请输入姓名"><br>
        性别: <input type="text" id="editGender" placeholder="请输入性别"><br>
        <input type="submit" value="修改">
    </form>

    <script>
        /* 1. 准备数据 对象数组*/
        var userList = [
            { id: 1, username: "张三", gender: "男" },
            { id: 2, username: "李四", gender: "男" },
            { id: 3, username: "王五", gender: "女" },
            { id: 4, username: "赵六", gender: "男" },
            { id: 5, username: "田七", gender: "女" },
        ]
        /*
            查询:   
                将用户列表当中的数据渲染出来
        */
        var tbody = document.querySelector("tbody")
        render();
        /* 渲染用户列表 */
        function render() {
            var str = "";
            userList.forEach(function (item) {
                str += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.username}</td>
                    <td>${item.gender}</td>
                    <td>
                        <button data-id='${item.id}' id='edit'>编辑</button>
                        <button data-id='${item.id}' id='del'>删除</button>
                    </td>
                </tr>
            `
            })
            tbody.innerHTML = str;
        }

        /* 
            增:
                注意: ID 是唯一的   
                1. 收集表单当中数据
                2. 将收集的数据保存到数组里面
                3. 将数组重新一遍
        */
        add.onsubmit = function (e) {
            //阻止表单提交
            e.preventDefault();
            /*
                1. 收集 => value
                2. 判断非空
                3. 收集数据为一个对象
            */
            //收集表单
            var username = addUserName.value
            var gender = addGender.value
            //非空判断
            if (!(username.trim().length > 0 && gender.trim().length > 0)) return alert("请输入完整的数据")
            //收集数据为一个对象
            var obj = {
                id: +new Date(),
                username: username,
                gender: gender
            }

            //获取数据,使用push方法将对象扔到数组的最后面去
            userList.push(obj);
            //重新渲染
            render();

            /* 重新清空文本框 */
            addUserName.value = ""
            addGender.value = ""
        }


        /* 删除
            都是根据ID来进行删除
                点击删除按钮的时候获取到当前这一行数据的ID
                根据ID就删除
                重新渲染数据


                ☆ 我们在删除的是都在每一个删除按钮上面绑定一个删除的事件 delUser
                    事件 onclick 所占用的内存比属性的内存要大的多

        */
        //使用事件的委派(事件的委托)来实现删除擦欧洲哦
        tbody.onclick = function (e) {
            //获取点击的目标
            if (e.target.id == 'del') {
                var res = window.confirm("您确定要删除吗?")
                if (!res) return;
                // console.log(e.target.dataset.id);  //1

                /* 
                    方案二
                        使用过滤器
                */
                userList = userList.filter(function (item) {
                    // console.log(item);
                    return item.id != e.target.dataset.id
                })

                /**
                 * 方案一
                */
                // // 使用数组高阶函数 findIndex
                // var index = userList.findIndex(function(item){
                //     // console.log(item);
                //     return item.id == e.target.dataset.id
                // })
                // console.log(index);
                // userList.splice(index,1)

                //删除完毕重新渲染数据
                render();
            }


            /* 修改 根据ID获取当中用户的信息
                隐藏修改的表单
                
                1.点击修改按钮的时候显示修改的表单
                2.获取本行的修改的数据,渲染到修改的表单里面

                正式修改数据
            */
            if (e.target.id == 'edit') {
                console.log(e.target.dataset.id);
                // 1.点击修改按钮的时候显示修改的表单
                update.style.display = "block"
                /* 
                    find    => 数组当中对应的元素
                */
                var obj = userList.find(function (item) {
                    // console.log(item);
                    return item.id == e.target.dataset.id
                })
                //渲染修改的那个表单
                editId.value = obj.id;
                editUserName.value = obj.username;
                editGender.value = obj.gender
            }

        }


        /* 
            2. 根据用户的信息进行修改
                1. 阻止表单的提交
                2. 获取修改完毕之后的数据
                    获取文本框里面的value包括id => 做一个非空判断
                    将我修改之后的数据在数据里面给替换之前的数据
        */
        update.onsubmit = function (e) {
            //阻止默认提交事件
            e.preventDefault();
            // 获取文本框里面的value包括id
            var id = editId.value
            var username = editUserName.value
            var gender = editGender.value
            // console.log(id,username,gender);
            var index = userList.findIndex(function(item){
                return item.id == id;
            })

            // var obj = {
            //     id:id,
            //     username:username,
            //     gender:gender
            // }
            var obj = {
                id,
                username,
                gender
            }
            // console.log(index);
            userList[index] = obj

            render();

            //清空数据
            editId.value = "";
            editUserName.value = "";
            editGender.value = ""
            //隐藏修改框
            update.style.display = "none"
        }
    </script>
</body>

</html>